<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋对战 - 注册</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="nav">
        <div class="logo">
            <i class="fas fa-chess-board"></i>
            <span>五子棋对战平台</span>
        </div>
    </div>
    <div class="container">
        <div class="card register-container">
            <div class="register-dialog">
                <h3><i class="fas fa-user-plus"></i> 账号注册</h3>
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="user_name" class="input-field" placeholder="请设置用户名">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password" class="input-field" placeholder="请设置密码">
                </div>
                <div class="row">
                    <button id="submit" class="btn btn-primary" onclick="reg()">注册</button>
                </div>
                <div class="login-link">
                    <a href="/login.html">已有账号？去登录</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 提示弹窗 -->
    <div class="custom-modal" id="infoModal">
        <div class="modal-content">
            <div id="info-content"></div>
            <button class="btn btn-primary" onclick="document.getElementById('infoModal').style.display='none'">确定</button>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        function reg() {
            const regInfo = {
                username: document.getElementById("user_name").value,
                password: document.getElementById("password").value
            };

            if (!regInfo.username || !regInfo.password) {
                showInfo("请输入用户名和密码");
                return;
            }

            if (regInfo.password.length < 6) {
                showInfo("密码长度不能少于6位");
                return;
            }

            $.ajax({
                url: "/reg",
                type: "post",
                data: JSON.stringify(regInfo),
                contentType: "application/json",
                success: function(res) {
                    if (res.result === false) {
                        showInfo(res.reason || "注册失败");
                        document.getElementById("user_name").value = "";
                        document.getElementById("password").value = "";
                    } else {
                        showInfo("注册成功，即将跳转到登录页面...", true);
                        setTimeout(() => {
                            window.location.assign("/login.html");
                        }, 1500);
                    }
                },
                error: function(xhr) {
                    showInfo("网络错误，请稍后重试");
                    document.getElementById("user_name").value = "";
                }
            });
        }

        function showInfo(msg, isSuccess = false) {
            const modal = document.getElementById("infoModal");
            const content = document.getElementById("info-content");
            content.textContent = msg;
            content.style.color = isSuccess ? "var(--success)" : "var(--danger)";
            modal.style.display = "flex";
        }
    </script>
</body>
</html>